<template>
	<view class="page-container">
		<wd-swiper height="140" :list="swiperList" autoplay v-model:current="current" @click="handleClick"></wd-swiper>
		<view class="tips">
			<view class="tip" @click="goOther(info.merchant_id)" v-for="item in pointList" :key="item.id">
				<text>{{item.name}}</text>
				<view class="">
					<image src="http://api.yibi.com.cn/upload/ab/address.png" mode=""></image>
				</view>
			</view>

		</view>
		<view class="html">
			<mp-html :content="info.info" />
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
	} from 'vue'
	import {
		onLoad,
		onUnload
	} from "@dcloudio/uni-app";
	import {
		mapEventDetail
	} from "@/api/map"
	const current = ref(0)
	const content = ref('<p>这里是富文本内容哦</p>')
	const swiperList = ref([])
	//轮播点击
	function handleClick(e) {
		console.log(e)
	}
	const goOther = (id) => {
		uni.navigateTo({
			url: '/mapSubpack/pages/mapDetail/mapDetail?merchantId=' + id + '&lev=4'
		})
	}
	const pointList = ref([])
	const info = ref({})
	const resMapEventDetail = async (id) => {
		swiperList.value = []
		await mapEventDetail({
			id
		}).then(res => {
			pointList.value = res.result.eventPointList
			info.value = res.result.event
			res.result.attachList.forEach(a => {
				swiperList.value.push('http://114.55.113.117' + a.url)
			})
		})
	}
	onLoad((options) => {
		resMapEventDetail(options.id)
	})
</script>
<style lang="scss" scoped>
	.page-container {
		padding: 26rpx;
		min-height: 100vh;
		background: #fdffeb;

		.tips {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			margin-top: 20rpx;

			.tip {
				display: flex;
				align-items: center;
				margin-right: 30rpx;
				background: #E8FCF3;
				border-radius: 10rpx;
				border: 1px solid #1B9D61;

				>text {
					display: inline-block;
					padding: 0 20rpx;
					box-sizing: border-box;
					font-weight: 500;
					font-size: 28rpx;
					color: #1B9D61;
					flex: 1;
				}

				>view {
					width: 52rpx;
					height: 52rpx;

					image {
						width: 22rpx;
						height: 22rpx;
					}

					background: #1B9D61;
					border-radius: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}

	}

	.html {
		margin-top: 60rpx;
		background: #FEFFF5;
		border-radius: 10rpx;
		border: 1px solid #D7D9C8;
		padding: 40rpx 15rpx;

			font-weight: 400;
			font-size: 28rpx;
			color: #2B2A25;
			line-height: 42rpx;
			image{
				width: 100%;
			}
	}
</style>